<template>
	<view class="">
		<u-navbar title="收货地址" :border-bottom="false"></u-navbar>
		<view class="top-box">
			<view class="search c9 fs24" @click="chooseAddress">
				在这里搜索您想定位的信息
			</view>
			<!-- 当前定位 -->
			<view class="df aic mt20" v-if="LOCATION.name">
				<nmr-icon islinear linearStyle="linear-gradient(180deg, #48A147 0%, #8AE38A 100%)" name="dingwei-3"
					color="#48A147" class="mr10"></nmr-icon>
				<view class="ml18">
					<view class="c3 fs28 fw8 df aic ">
						<view class="" style="width: 500rpx;">
							{{LOCATION.name}}
						</view>
						<view class="location">当前定位</view>
					</view>
					<view class="c6 fs24 ">{{LOCATION.address}}</view>
				</view>
			</view>
		</view>
		<view class="my-address" @click="changeDefault" v-if="addressDefault.shopName">
			<nmr-icon size="30" islinear linearStyle="linear-gradient(180deg, #48A147 0%, #8AE38A 100%)"
				name="homepage_fill" color="#48A147" class="mr10"></nmr-icon>
			<text class="fs26 c3">我的地址</text>
			<view class=" ml40">
				<view class="c3 fs28 fw8 df aic ">{{addressDefault.shopName}}<view class="location default">默认</view>
				</view>
				<view class="c3 fs26  df aic mt10">{{addressDefault.receiver}} {{addressDefault.phone}}</view>
				<view class="c6 fs26  df aic mt8">{{addressDefault.province}}{{addressDefault.city}}{{addressDefault.area}}{{addressDefault.receiveAddress}}{{addressDefault.homeNumber}}</view>
			</view>
		</view>
		<!-- 附近 -->
		<view class="vicinity pr">
			<nmr-icon size="30" islinear linearStyle="linear-gradient(180deg, #48A147 0%, #8AE38A 100%)"
				name="dingwei-3" color="#48A147" class="mr10"></nmr-icon>
			<text class="fs26 c3">附近地址</text>
			<view class="pr" style="height: 600rpx;" v-if="loading">
				<ourLoading :active="loading" translateY="50" color="#48A147" background-color="white" size="4">
				</ourLoading>
			</view>
			<template v-if="!loading">
				<view class="address-list" v-if="isLocation">
					<view class="address-item df" v-for="item in poisList" @click="changeAddress(item)">
						<nmr-icon size="30" name="dingwei-3" color="#666666" class="mr10"></nmr-icon>
						<view>
							<view class="c3 fs28 fw8 df aic ">{{item.name}}</view>
							<view class="c6 fs24  df aic mt8">
								{{item.pname}}{{item.cityname}}{{item.adname}}{{item.address}}
							</view>
						</view>

					</view>
				</view>
				<view class="empty" v-else>
					<view class="u-text-center">
						<image src="../static/empty/address-empty.png" style="width: 428rpx;height: 360rpx;"
							mode="widthFix">
						</image>
						<view @click="goSet" class="go-home df aic jcc mt30">
							去开启
						</view>
					</view>
				</view>
			</template>
		</view>
		<view class="mdbJr" style="height: 120rpx;"></view>
		<view class="pdbJr bgcf cart-box">
			<view class="content ">
				<u-button hair-line @click="handlesubmit" :loading="loading"
					:custom-style="{fontSize: '26rpx', color: '#ffffff',width: '690rpx',height: '88rpx',background: 'linear-gradient(90deg, #48A147 0%, #8AE38A 100%);'}"
					shape='circle' ripple>添加收货地址</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDefaultAddress
	} from '@/api/address.js'
	import QQMapWX from '@/common/qqmap-wx-jssdk.js'
	import ourLoading from '@/components/our-loading/our-loading.vue'
	import AMapWX from 'amap-wx';
	let wxPermisson = require('@/utils/wxPermisson.js')
	const userCameraName = "scope.userLocation"; // 摄像头权限
	const userCameraZhName = "定位服务"; // 摄像头权限对应的中文名称
	let amap
	export default {
		components: {
			ourLoading
		},
		data() {
			return {
				poisList: [],
				isLocation: false,
				loading: false,
				addressDefault:{
					shopName:''
				}
			}
		},
		mounted() {
			this.getDefaultAddress()
			amap = new AMapWX.AMapWX({
				key: 'b5642f75c6c20d3dbc4f3232fc29301f'
			});
			wxPermisson.permission_request(userCameraName, userCameraZhName, (e) => {
				this.isLocation = e
				if (e) {
					this.loading = true
					this.getPoiAround()
				}

			});
		},
		onShow() {

		},
		methods: {
			handlesubmit(){
				uni.navigateTo({
					url:'/pages/my/address/address'
				})
			},
			// 默认地址
			getDefaultAddress() {
				getDefaultAddress().then(res => {
					if (res.code == 200) {
						if(res.data){
							this.addressDefault = res.data
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
					}
				})
			},
			async changeAddress(item,flag=true) {
				let info = await this.getAddressCode(item.location.split(',')[1],item.location.split(',')[0])
				console.log(info);
				let flagArea = info.adcode==this.LOCATION.areaId
				this.$u.vuex('LOCATION', { //地址
					addressId: item.addressId||"",
					areaId:info.adcode,
					longitude: item.location.split(',')[0],
					latitude: item.location.split(',')[1],
					name: item.name,
					address: item.pname + item.cityname + item.adname + item.address,
				})
				if(flagArea){
					flag&&uni.navigateBack()
				}else{
					uni.setStorageSync("CARGOODLIST", []);
					uni.removeTabBarBadge({
						index: 3,
					});
					if(flag){
						
						uni.reLaunch({
							url:'/pages/index/index'
						})
					}
					
				}
				
			},
			getPoiAround() {
				
				let that = this
				amap.getPoiAround({
					success: function(data) {
						//成功回调
						that.poisList = data.poisData
						// 避免每一次都被覆盖掉 如果有地址的话 
						if (that.poisList.length && !that.LOCATION.name) {
							that.changeAddress(data.poisData[0],false)
						}
						that.loading = false
					},
					fail: function(info) {
						//失败回调
						that.loading = false
						console.log(info)
					}
				})
			},
			changeDefault(){
				let flag = this.addressDefault.areaId==this.LOCATION.areaId
				this.$u.vuex('LOCATION', { //地址
					longitude: this.addressDefault.lng,
					addressId: this.addressDefault.addressId||"",
					latitude: this.addressDefault.lat,
					name: this.addressDefault.shopName,
					areaId:this.addressDefault.areaId,
					address: this.addressDefault.province+this.addressDefault.city+this.addressDefault.area+this.addressDefault.receiveAddress+this.addressDefault.homeNumber,
				})
				if(flag){
					uni.navigateBack()
				}else{
					uni.setStorageSync("CARGOODLIST", []);
					uni.removeTabBarBadge({
						index: 3,
					});
					uni.reLaunch({
						url:'/pages/index/index'
					})
				}
			},
			getAddressCode(latitude,longitude){
				let that = this
				const qqmapsdk = new QQMapWX({
					key: this.$QQMapWXKey
				});
				return new Promise((resolve,reject) =>{
					qqmapsdk.reverseGeocoder({
						location: {
							latitude: latitude,
							longitude: longitude
						},
						get_poi: 0,
						success: async (r) => {
							let {
								adcode,
								city_code,
								province,
								city,
								district
							} = r.result.ad_info
							resolve(r.result.ad_info)
						},
					})
				})
				
			},
			chooseAddress() {
				let that = this
				uni.chooseLocation({
					success: async function(res) {
						let info = await that.getAddressCode(res.latitude,res.longitude)
						let flag = info.adcode==that.LOCATION.areaId
						that.$u.vuex('LOCATION', { //地址
							addressId: res.addressId||"",
							longitude: res.longitude,
							latitude: res.latitude,
							name: res.name,
							address: res.address,
							areaId:info.adcode
						})
						if(flag){
							uni.navigateBack()
						}else{
							uni.setStorageSync("CARGOODLIST", []);
							uni.removeTabBarBadge({
								index: 3,
							});
							uni.reLaunch({
								url:'/pages/index/index'
							})
						}
					},
					fail(e) {
						console.log(e)
					}
				});
			},

			// 开启设置
			goSet() {
				wx.openSetting({
					success(res) {

					},
					fail(err) {

					},
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cart-box {
		width: 100%;
		position: fixed;
		z-index: 1205;
		bottom: 0;
		box-shadow: 0rpx 0rpx 4rpx 1rpx rgba(0, 0, 0, 0.16);

		.content {
			margin: 17rpx 30rpx;
		}

	}

	.address-item {
		padding: 20rpx 0;
		border-bottom: 2rpx solid #E5E5E5;
	}

	.vicinity {
		margin-top: 20rpx;
		background-color: white;
		padding: 16rpx 30rpx;
		min-height: 600rpx;
	}

	.my-address {
		background-color: white;
		padding: 20rpx 27rpx;
		margin-top: 20rpx;
	}

	.top-box {
		padding: 20rpx 30rpx;
		background-color: white;
	}

	.search {
		width: 690rpx;
		height: 76rpx;
		background: #F1F1F1;
		border-radius: 38rpx 38rpx 38rpx 38rpx;
		opacity: 1;
		padding: 22rpx 30rpx;
	}

	.location {
		width: 116rpx;
		height: 36rpx;
		background: linear-gradient(90deg, #48A147 0%, #8AE38A 100%);
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		opacity: 1;
		padding: 3rpx 10rpx;
		font-size: 24rpx;
		color: white;
		margin-left: 11rpx;
	}

	.default {
		padding: 3rpx 26rpx;
		width: 100rpx;
	}

	.empty {
		margin-top: 100rpx;

		.go-home {
			width: 160rpx;
			height: 58rpx;
			background: linear-gradient(90deg, #48A147 0%, #8AE38A 100%);
			border-radius: 34rpx 34rpx 34rpx 34rpx;
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin: 0 auto;
			margin-top: 30rpx;
		}
	}
</style>